<template>
  <div>

    <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
      <div style="width: 200px;padding-left: 30px;font-weight: bold;color: black;font-size: x-large">NCMS系统</div>
      <el-link @click.native="$router.push('/Main')" style="margin-left: 550px">首页</el-link>
      <el-link @click.native="$router.push('/Activity')" style="margin-left: 100px">社团活动</el-link>
      <div style="flex: 1"></div>
      <div style="width: 100px">
        <el-dropdown>
        <span class="el-dropdown-link">
        我的<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="background-color: white;color: #333333" @click.native="$router.push('/Uinformation')">个人信息</el-dropdown-item>
            <el-dropdown-item style="background-color: white;color: #333333"
                              @click.native="$router.push('/Login')">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

<!--    <div>
      <el-carousel height="400px" direction="vertical" :autoplay="false">
        <el-carousel-item v-for="item in imgList" :key="item.name">
          <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title" />
        </el-carousel-item>
      </el-carousel>
    </div>-->
    <div >
      <el-carousel trigger="click" height="400px" :interval="3000" arrow="always" style="width:100%;background-color: darkgray">
        <el-carousel-item v-for="item in imgList" :key="item.name" style="width: 1000px;margin-left: 380px">
          <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title"/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin-left: 840px">
    <h3 style="margin: 0 auto;padding: 10px">最新社团</h3>
    </div>

    <div style="height: 500px;width: 100%;background-color: white;margin: auto 30%">
      <div style="margin-left: 10%">
        <el-input v-model="search" placeholder="请输入社团名称" style="width: 20%" clearable></el-input>
        <el-button type="info" style="margin-left: 5px" @click="load" >查询</el-button>
      </div>
      <el-table
          :data="tableData"
          border
          style="width: 45%">
        <el-table-column
            prop="id"
            label="ID"
            sortable
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            label="图片">
          <template #default="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.picture"
                :preview-src-list="scope.row.picture">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm title="确定加入此社团?" icon-color="red" cancel-button-type="info" confirm-button-type="danger"
                           @confirm="add(scope.row.id)">
              <template #reference>
                <el-button size="mini" type="info" >加入</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

    </div>



  <div style="width: 100%;height: 30px;background-color: darkgray;margin-top: 50px">
  </div>

  <div style="width: 100%;height: 100px;background-color: #333333">
    <h4 style="color: white;margin-left: 780px">联系我们|关于我们|合作电话</h4>
  </div>
  </div>


</template>

<style>

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}



</style>


<script>
import request from "../utils/request";

export default {
  components: {},
  data() {
    return {
      form:{},
      dialogVisible:false,
      search:'',
      currentPage4:1,
      pageSize:10,
      total:0,
      tableData: [],
      imgList: [
        {
          name: "lj1",
          src: require("@/assets/images/社团招新1.jpg"),
          title: "这是lj1.png"
        },
        {
          name: "lj2",
          src: require("@/assets/images/社团招新2.jpg"),
          title: "这是lj2.png"
        },
        {
          name: "lj3",
          src: require("@/assets/images/社团招新3.jpg"),
          title: "这是lj3.png"
        }
      ]
    };
  },
  created() {
    this.load()
  },
  methods: {
    load()
    {
      request.get("/association",{
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search:this.search
        }
      }).then(res=>{
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.records.length
      })
    },
    add(id)
    {
      console.log(id)
     /* console.log(sessionStorage.getItem("user"))*/
      var a = sessionStorage.getItem("user");
      console.log(a)
      request.put("/association/" + id).then(res=>{
        if(res.code === '0')
        {
          this.$message({
            type:"success",
            message:"加入成功"
          })
        } else {
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load()
      })
    }
  }
};
</script>


<style scoped>

</style>